<template>
	<div class='disabled'>
		<div class='banner'>
			<img  src='../images/disabled/focus.png'>
		</div>
		<div class='project-container'>
		  	<my-title title="残疾人就业发展计划"></my-title>
		  	<div class='project-wrap'>
		  		<div class='img img-1'></div>
		  		<div class='content'>
		  			<p class='title bold'>政策敏感度</p>
		  			<p class='desc'>了解社会对残疾人就业的政策趋势</p>
		  		</div>
		  		<div class='clearfix'></div>
		  	</div>
		  	<div class='project-wrap'>
		  		<div class='img img-2'></div>
		  		<div class='content'>
		  			<p class='title bold'>自由职业者平台深度合作</p>
		  			<p class='desc'>可为残疾人定制最适合的岗位及培训</p>
		  		</div>
		  		<div class='clearfix'></div>
		  	</div>
		  	<div class='project-wrap'>
		  		<div class='img img-3'></div>
		  		<div class='content'>
		  			<p class='title bold'>与各地残联的紧密联系</p>
		  			<p class='desc'>深度了解残疾人的状况与需求</p>
		  		</div>
		  		<div class='clearfix'></div>
		  	</div>
	  	</div>
		<div class='plan-container'>
		  	<my-title title="案例分析"></my-title>
		  	<div class='plan-wrap'>
		  		<div class='text-center title'>企业残保金方案</div>
		  		<div class='desc'>根据企业的工作性质，优先推荐后台残疾人员从事客服或超管等职务，既减低了公司运营成本又避免了残保金处罚</div>
		  		<div class='item-1'><span class='item-title'>例：广州企业雇佣</span><span class='item-value'>&nbsp;200人</span></div>
		  		<div class='item-2'><span class='item-title'>优化前成本估算：</span><span class='item-value'>207,790.08元</span></div>
		  		<div class='item-3'><span class='item-title'>优化后成本：</span><span class='item-value'>135,224元</span></div>
		  		<div class='item-4'><span class='item-value'>&darr;&nbsp;成本下降72,566.08元</span></div>
		  		<div class='text-center btn-wrap bold'><button id='contact' @click="jumpCollection" data-company='1' data-title='获取方案详情' data-type='2' data-type-name='企业残保金方案咨询'>联系专家</button></div>
		  	</div>
		</div>
  </div>
</template>

<script>
import myTitle from '../components/title'

export default {
  name: 'disabled',
  data () {
    return {
      msg: 'Disabled'
    }
  },
  methods: {
  	jumpCollection(event){
  		let obj = document.getElementById("contact");
  		window.localStorage.setItem('pageTitle',obj.getAttribute("data-title"));
  		window.localStorage.setItem('ifCompany',obj.getAttribute("data-company"));
  		window.localStorage.setItem('type',obj.getAttribute("data-type"));
  		window.localStorage.setItem('typeName',obj.getAttribute("data-type-name"));
  		this.$router.push('contact')
        document.body.scrollTop = 0
  	},
  },
	components: {
	    myTitle
	},
}
</script>

<style lang="scss">
@import "../style/function";
@import "../style/color";
@import "../style/common";
.clearfix{
	clear:both;
}
.banner img{
    width: 100%;
}
.project-container{
}
.project-wrap{
	margin:0 pxToRem(76);
	margin-bottom:pxToRem(60);
}
.project-wrap .img{
	width: pxToRem(168);
    height: pxToRem(168);
    background-size: 100% 100%;
    float:left;
}
@for $i from 1 through 3 {
        .project-wrap .img-#{$i} {
            background-image: url('../images/disabled/project-' + $i + '.png');
        }
    }
.project-wrap .content{
    float:left;
    margin-left:pxToRem(40);
    width:pxToRem(380);
    padding-top:pxToRem(15);
    overflow:hidden;
    max-height:pxToRem(140);
    .title{
    	font-size:pxToRem(32);
    	color:$dark-grey;
    	margin:0;
    	white-space:nowrap;
    }
    .desc{
    	font-size:pxToRem(28);
    	color:$grey;
    	margin-top:pxToRem(20);
    	font-style:italic;
    }
}
.plan-container{
	background-color:#f5f6f8;
}

.plan-wrap{
	padding: 0 pxToRem(60);
}
.plan-wrap .title{
	font-size:pxToRem(32);
	color:$grey;
    font-weight: bold;
}
.plan-wrap .desc{
	margin-top:pxToRem(30);
	font-style:italic;
	font-size:pxToRem(28);
	color:$light-grey;
}
@for $i from 1 through 4 {
    .item-#{$i} {
        font-size:pxToRem(28);
        color:$grey;
    }
    .item-#{$i} .item-value{
        color:$dark-grey;
        font-weight:bold;
    }
}
.plan-wrap .item-1{
	margin-top:pxToRem(64);
	padding-bottom:pxToRem(24);
	border-bottom:1px solid $border-grey;
}
.plan-wrap .item-2{
	margin-top:pxToRem(24);
	
	.item-value{
		float:right;
	}
}
.plan-wrap .item-3{
	margin-top:pxToRem(20);
	padding-bottom:pxToRem(24);
	border-bottom:1px solid $border-grey;
	
	.item-value{
		color:$red;
		float:right;
	}
	
}
.plan-wrap .item-4{
	margin-top:pxToRem(24);
	text-align:right;
	color:$red;
	
	.item-value{
		color:$red;
		font-style:italic;
	}
}
.btn-wrap{
	margin-top:pxToRem(70);
	padding-bottom:pxToRem(100);
	text-align:center;
}
.btn-wrap button{
	width:pxToRem(400);
	height:pxToRem(72);
	border-radius:pxToRem(36);
	color:$white;
	background-color:$red;
	border:0;
	font-size:pxToRem(32);
}
</style>
